<template>
	<view>
		<view class="order-content">
			<view v-if="delayDetail.reason" class="content-item">
				<text class="item-name">申请原因：</text>
				<view style="word-break:break-all;flex: 1;">{{delayDetail.reason}}</view>
			</view>
			<view  v-if="delayDetail.delay" class="content-item">
				<text class="item-name">申请时长：</text>
				<view style="word-break:break-all;flex: 1;">{{delayDetail.delay + '分钟'}}</view>
			</view>
			<view v-if="delayDetail.applyName" class="content-item">
				<text class="item-name">申请人：</text>
				<view style="word-break:break-all;flex: 1;">{{delayDetail.applyName}}</view>
			</view>
			<view v-if="delayDetail.applyTime" class="content-item">
				<text class="item-name">申请时间：</text>
				<view style="word-break:break-all;flex: 1;">{{delayDetail.applyTime}}</view>
			</view>
			<!-- <view v-if="" class="content-item">
				<text class="item-name ">申请附件：</text>
				
				<view style="word-break:break-all;flex: 1;">{{'123'}}</view>
			</view> -->
			<file-list v-if="delayDetail.attachments" title="申请附件" :idList="delayDetail.attachments" :fileObj="delayFile" :length="imgLength"></file-list>
			<view class="content-item">
				<text class="item-name">审批结果：</text>
				<view style="word-break:break-all;flex: 1;">{{approvalStatus[delayDetail.status]}}</view>
			</view>
			<view v-if="delayDetail.reviewerReason" class="content-item">
				<text class="item-name">审批描述：</text>
				<view style="word-break:break-all;flex: 1;">{{delayDetail.reviewerReason}}</view>
			</view>
			<view v-if="delayDetail.reviewerName" class="content-item">
				<text class="item-name">审批人：</text>
				<view style="word-break:break-all;flex: 1;">{{delayDetail.reviewerName}}</view>
			</view>
			<view class="content-item">
				<text class="item-name">审批时间：</text>
				<view style="word-break:break-all;flex: 1;">{{delayDetail.dealTime}}</view>
			</view>
			<delay-step  @detail="goHistory" :options="history" active-color="#5094FF" :active="history.length-1" direction="column"></delay-step>
		</view>
		<button v-if="delayDetail.status === 1" class="delay-btn" @click="handleDelay">审批</button>
	</view>
</template>

<script>
	import FileList from '@/components/my-components/fileList'
	import delayStep from '../Components/delayStep.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			delayStep,
			FileList
		},
		data() {
			return {
				imgLength: 0,
				imgItem: [],
				delayFile: {},
				approvalStatus: this.$type.approvalStatus,
				history: null,
				params: {
					ticketId: null
				},
				delayDetail: {}
			}
		},
		onLoad(options) {
			this.params.ticketId = +options.id
			this.getDelayDetail()
		},
		methods: {
			async getDelayDetail() {
				uni.showLoading({
					mask: true
				})
				const res = await this.$http2.post('ticketSystem/delay/list', this.params)
				console.log(res)
				if(res.code === 10000) {
					this.delayDetail = res.data.record
					if (res.data.record.attachments !== null) {
						res.data.record.attachments.forEach((item, index) => {
							this.downloadFile(item, index)
						})
					}
					this.delayDetail.applyTime = this.delayDetail.applyTime && dayjs(this.delayDetail.applyTime).format('YYYY-MM-DD HH:mm:ss') 
					this.delayDetail.dealTime = this.delayDetail.dealTime && dayjs(this.delayDetail.dealTime).format('YYYY-MM-DD HH:mm:ss') 
					this.history = res.data.list
				}
			},
			downloadFile(id, index) {
				this.imgLength++
				this.$http2.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.delayFile[index] = {}
						this.delayFile[index].fileData = res.data.fileData
						// console.log(this.ticketFile)
					}
				})
			},
			goHistory(id) {
				uni.navigateTo({
					url: '/ticketSystem/delayHistory/delayHistory?id=' + id
				})
			},
			handleDelay() {
				uni.navigateTo({
					url: '/ticketSystem/handleDelay/handleDelay?id=' + this.delayDetail.id
				})
			}
		}
	}
</script>

<style lang="scss">
	// .delay-btn {
	// 	height: 90rpx;
	// 	color: #fff;
	// 	position: fixed;
	// 	bottom: 0;
	// 	left: 0;
	// 	right: 0;
	// 	border-radius: 0;
	// 	background-color: #1152FC;
	// }
</style>
